<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping</title>
</head>

<body>
    <div id="tb">
        <h1>购物车</h1>
        <div v-if="list.length>0">
            <table>
                <tr>
                    <th>勾选</th>
                    <th>id</th>
                    <th>商品名称</th>
                    <th>数量</th>
                    <th>价格</th>
                    <th>合计</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item,index in list" :key="item.id">
                    <td><input type="checkbox" name="Shopping"></td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <button @click="btnMinus(index)" :disabled="item.count==1">-</button>
                        {{item.count}}
                        <button @click="btnAdd(index)">+</button>
                    </td>
                    <td>{{item.price}}￥</td>
                    <td>{{item.price * item.count}}￥</td>
                    <td><input type="button" value="删除" @click="btnDel(index)"></td>
                </tr>
                
            </table>
            <div>合计：￥ {{countPrices}}</div>
            <div>八折优惠后：￥ {{discounts}}</div>
        </div>
        <div v-else>
            <h3>购物车为空</h3>
        </div>
        <h2>添加商品到购物车</h2>
        <form action="">
            <input type="text" placeholder="商品名" v-model="product.name">
            <input type="text" placeholder="价格" v-model="product.price">
            <input type="button" value="添加购物车" @click='productAdd'>
        </form>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/shopping.js"></script>
</body>

</html>